<template>
    <!-- 视图部分 -->
    <div>
        <div class="header">
            <!-- 头部 -->
            <div style="display:flex;">
                <!-- 返回功能 -->
                <div style="width:10%;" @click="goBack">返回</div>
                <div style="width:90%;text-align:center;">{{ filmInfo.name }}</div>
            </div>
            <div>
                <img :src="filmInfo.poster" width="100%" height="300" alt="" />
            </div>
        </div>

        <div class="detail">
            <div style="display:flex;">
                <div>{{ filmInfo.name }}</div>
                <div>{{ filmInfo.grade }}</div>
            </div>
            <div>{{ filmInfo.category }}</div>
            <div>{{ filmInfo.premiereAt | parseTime }}上映</div>
            <div>{{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟</div>
            <div>{{ filmInfo.synopsis }}</div>
        </div>

        <div class="photos1">
            <!-- 图片区域（演职人员） -->
            <div>
                演职人员
            </div>
            <div>
                <!-- 在这里输出可以滑动的图片信息 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in filmInfo.actors" :key="item.name">
                            <img :src="item.avatarAddress" width="85" />
                            <div>{{ item.name }}</div>
                            <div>{{ item.role }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="photos2">
            <!-- 图片区域 -->
        </div>
    </div>
</template>

<script>
// 逻辑部分
import uri from "@/config/uri";
// 导入moment
import moment from "moment";
// 导入swiper相关的外部文件
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";

export default {
    data() {
        return {
            filmInfo: {},
        };
    },
    // 获取数据
    created() {
        // 通知事件中心隐藏底部导航
        // this.$eventBus.$emit("toggleFooter", false);
        // vuex修改数据源
        this.$store.commit("common/setIsShow", false);

        // 获取电影的id号（获取时参数名称要与路由规则中声明的一致）
        let filmId = this.$route.params.film_id;
        this.$http.get(uri.getDetail + "?filmId=" + filmId).then((ret) => {
            // console.log(ret.data.film);
            this.filmInfo = ret.data.film;
            // 产生滑动图片组
            this.$nextTick(() => {
                new Swiper(".swiper-container", {
                    slidesPerView: 4,
                    spaceBetween: 30,
                });
            });
        });
    },
    beforeDestroy() {
        // 在将要离开该组件的时候通知事件中心将底部导航放出来
        // this.$eventBus.$emit("toggleFooter", true);

        this.$store.commit("common/setIsShow", true);
    },
    methods: {
        // 返回上一页
        goBack() {
            this.$router.go(-1);
        },
    },

    // 过滤器
    filters: {
        // 修饰上映时间
        parseTime(timestamp) {
            // moment作为js包，这里时间戳处理单位为毫秒
            return moment(timestamp * 1000).format("YYYY-MM-DD");
        },
    },
};
</script>

<style scoped>
/* 样式部分 */
</style>
